<template v-if="bye">
  <div class="business_record">
    <RouteTitle />
    <a-row
      :wrap="false"
      :gutter="[16, 16]"
      style="margin: 20px 0; transform: translateX(-10px)"
    >
      <a-col :span="show_single_org_user ? 16 : 24">
        <a-row class="row-bg" :wrap="false">
          <a-col :span="spanNum" v-for="(item, index) in topList" :key="index">
            <a-row :wrap="false">
              <a-col
                class="image-icon"
                :class="index != 0 ? 'border-left' : ''"
              >
                <cu-icon
                  :style="{ color: item.color }"
                  :type="item.icon"
                  class="image"
                />
              </a-col>
              <a-col>
                <div class="title">
                  {{ item.title }}
                  <question-circle-outlined
                    @click="clickFn"
                    style="margin-left: 4px"
                  />
                </div>
                <div class="num">{{ item.num > 0 ? item.num : 0 }}</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8"  v-if="show_single_org_user">
        <div class="top-right">
          <div class="lf" @click="inviteNewUser">
            <a-space style="display: flex; align-items: center">
              <gift-outlined
                style="font-size: 35px; color: var(--ss-primary-color)"
              />
              <span>邀请新用户</span>
            </a-space>
            <right-outlined class="right-icon" />
          </div>
          <a-divider
            type="vertical"
            style="height: 60px; background-color: #e8e8e8"
          />
          <div class="rg" @click="goVoucher">
            <a-space>
              <img :src="chargeIcon" />
              <span>{{point_coin_alias}}充值</span>
            </a-space>
            <right-outlined class="right-icon" />
          </div>
        </div>
      </a-col>
    </a-row>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane
        v-for="(item, index) in tabList"
        :key="item.tab_id"
        :tab="item.tab_name"
      >
        <component :is="item.component" />
      </a-tab-pane>
    </a-tabs>
    <!-- 导出弹框 -->
    <!-- <ExportMdal :visible="visibleExport" @cacel="visibleExport = false" /> -->
  </div>

  <Ruletable ref="RuletableRef"> </Ruletable>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
import {
  RightOutlined,
  GiftOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import ExportMdal from "../components/ExportMdal/index.vue";
import rechargeRecords from "./modules/rechargeRecords.vue";
import transactionFlow from "./modules/transactionFlow.vue";
import request from "../../../common/utils/request";
import Ruletable from "@/views/vip/modules/Ruletable.vue";
import store from "@/store/index.js";

import { onBeforeRouteLeave } from "vue-router";

export default defineComponent({
  name: "BusinessRecord",
  components: {
    RightOutlined,
    ExportMdal,
    rechargeRecords,
    transactionFlow,
    GiftOutlined,
    QuestionCircleOutlined,
    Ruletable,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      show_single_org_user: false,
      configData: {},
      bye: true,
      RuletableRef: null,
      activeKey: 1,
      visibleExport: false,
      chargeIcon:
        "",
      topList: [],
      tabList: [
        {
          tab_id: 1,
          component: "transactionFlow",
          tab_name: "交易流水",
        },
        {
          tab_id: 2,
          component: "rechargeRecords",
          tab_name: "充值记录",
        },
      ],

      // 积分别名
      point_coin_alias:''
    });
    onMounted(() => {
      route?.query?.activeKey == 2
        ? (state.activeKey = 2)
        : (state.activeKey = 1);
    });
    const goVoucher = () => {
      router.push({
        name: "VoucherCenter",
        query: {
          activeKey: 2,
        },
      });
    };

    const getUserBalance = () => {
      request.get("/work_ai", "/user/shotstack/user/statistic").then((res) => {
        state.topList = res?.result;
        if (route.path.includes("socialMedia")) {
          let index = state.topList.findIndex(
            (item) => item.title === "剪辑余额（条）"
          );
          state.topList.splice(index, 1);
        }
      });
    };

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false;
      next(true);
    });

    getUserBalance();
    const spanNum = computed(() => {
      return state.topList.length ? 24 / state.topList.length : 18;
    });
    // 邀请新用户
    const inviteNewUser = () => {
      router.push({
        name: "InviteNewUsers",
      });
    };

    const clickFn = () => {
      state.RuletableRef.showModal();
    };

        const getConfig = () => {
      // 优先从仓库取
          const work_ai_config = store.state?.shotstack?.work_ai_config;
      console.log(work_ai_config,'看看work_ai_config');
      
      if (!!work_ai_config) {
        state.configData = JSON.parse(JSON.stringify(work_ai_config));
        if (!state.configData.single_org_user) {
          state.show_single_org_user = true
        }
        state.point_coin_alias = work_ai_config?.point_coin_alias??''
        return;
      }
      request.get("/work_ai", "/config").then((res) => {
        state.configData = res.list;
        state.point_coin_alias = res.list?.point_coin_alias??''

         if (!state.configData.single_org_user) {
          state.show_single_org_user = true
        }
      });
    };

        getConfig()
    return {
      ...toRefs(state),
      clickFn,
      goVoucher,
      spanNum,
      inviteNewUser,
      getConfig
    };
  },
});
</script>

<style lang="less" scoped>
.business_record {
  padding: 14px 14px 0;
  .row-bg {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 26px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #555;
    }
    .num {
      font-size: 40px;
      font-weight: 700;
      color: #202020;
    }
  }
  .image-icon {
    width: 36px;
    height: 36px;
    margin-right: 20px;
    .image {
      font-size: 36px;
    }
  }
  .border-left {
    position: relative;

    &::after {
      position: absolute;
      left: -30px;
      top: 10px;
      width: 1px;
      height: 50px;
      background: #e8e8e8;
      content: "";
    }
  }
  .row-bg-right {
    height: 140px;
    padding: 0 40px;
    border-radius: 10px;
    background: linear-gradient(46deg, #fffcf5 0%, #fff5e2 52%, #fffcf5 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    .text {
      font-size: 22px;
    }
    .right-icon {
      width: 33px;
      height: 33px;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
      border-radius: 33px;
      color: #fff;
      background: linear-gradient(58deg, #ffa71f 0%, #ffd723 100%);
    }
  }
  .top-right {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    background: linear-gradient(46deg, #fffcf5 0%, #fff5e2 52%, #fffcf5 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    .lf {
      width: 48%;
      height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22px;
      padding: 0 10px;
    }
    .rg {
      width: 48%;
      height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22px;
      padding: 0 10px;
    }
    .right-icon {
      width: 23px;
      height: 23px;
      cursor: pointer;
      text-align: center;
      border-radius: 23px;
      color: #fff;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(58deg, #ffa71f 0%, #ffd723 100%);
    }
  }
  :deep(.ant-tabs-top > .ant-tabs-nav) {
    margin-bottom: 0;
  }
}
</style>
